<template>
    <div>

        <el-row :gutter="20">
            <el-col :span="6"><div class="title">累计确诊</div><div class="grid-content" style="background:rgb(163,29,19)">{{cumNum}}</div><div class="afterday" style="color:rgb(163,29,19)">较昨日：+{{cumNum_inc}}</div></el-col>
            <el-col :span="6"><div class="title">现有确诊</div><div class="grid-content" style="background:rgb(228,74,61)">{{nowNum}}</div><div class="afterday" style="color:rgb(228,74,61)">较昨日：+{{nowNum_inc}}</div></el-col>
            <el-col :span="6"><div class="title">累计死亡</div><div class="grid-content" style="background:rgb(51,51,51)">{{deadNum}}</div><div class="afterday" style="color:rgb(51,51,51)">较昨日：+{{deadNum_inc}}</div></el-col>
            <el-col :span="6"><div class="title">累计治愈</div><div class="grid-content" style="background:rgb(49,172,118)">{{cureNum}}</div><div class="afterday" style="color:rgb(49,172,118)">较昨日：+{{cureNum_inc}}</div></el-col>
        </el-row>
        <div class='wrapper'>
            <div class='chart' id='chart'></div>
        </div>
        <div style="width:200px; float:left;margin-left:5px">
            <el-input v-model="input" placeholder="请输入国家" size='small'></el-input>
            
        </div>
        <div style="width:100px; float:left;margin-bottom:20px;margin-left:20px"><el-button type='primary' size='small' @click="search">搜索</el-button></div>
         <el-table 
      :data="result"
      style="width: 100%">
      <el-table-column
        prop="areaName"
        label="国家"
        align=center>
      </el-table-column>
      <el-table-column
        prop="continents"
        label="大洲"
       align=center>
      </el-table-column>
      <el-table-column
        prop="confirmedNum"
        label="累计确诊" align=center>
      </el-table-column>
      <el-table-column
        prop="currentConfirmedNum"
        label="现有确诊" align=center>
      </el-table-column>
      <el-table-column
        prop="curedNum"
        label="累计治愈" align=center>
      </el-table-column>
      <el-table-column
        prop="deadNum"
        label="累计死亡" align=center>
      </el-table-column>
    </el-table>
        
    </div>
    
</template>
<script>
 import map from "../../assets/world.json";
export default {
    data () {
        return {
            map,
            result:[],
            cumNum:0,
            nowNum:0,
            deadNum:0,
            cureNum:0,
            cumNum_inc:0,
            nowNum_inc:0,
            deadNum_inc:0,
            cureNum_inc:0,
            input:'',
            data_world:[]
        }
    },
    methods: {
        currentWorld(){
            function formatterDateTime() {
                var date = new Date()
                var month = date.getMonth() + 1
                var datetime = date.getFullYear() +
                    "" // "年"
                    +
                    (month >= 10 ? month : "0" + month) +
                    "" // "月"
                    +
                    (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
                    "" +
                    (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) +
                    "" +
                    (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
                    "" +
                    (date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds());
                return datetime;
            }
            var that = this;
            $.ajax({
                type: 'post',
                url: 'http://route.showapi.com/2217-5',
                dataType: 'json',
                data: {
                    "showapi_timestamp": formatterDateTime(),
                    "showapi_appid": '505102', //这里需要改成自己的appid
                    "showapi_sign": '9fa6ea4e1c8b47078a64c3a8c34041c0', //这里需要改成自己的应用的密钥secret
                },

                error: function(XmlHttpRequest, textStatus, errorThrown) {
                    alert("操作失败!");
                },
                success: function(result) {
                    that.result = result.showapi_res_body.foreignList;
                    for(var i=0;i<that.result.length;i++){
                        that.cumNum += that.result[i].confirmedNum;
                        that.nowNum += that.result[i].currentConfirmedNum;
                        if(!that.result[i].deadNum){
                            that.result[i].deadNum = 0
                        }
                        if(!that.result[i].curedNum){
                            that.result[i].curedNum = 0
                        }
                        that.deadNum += that.result[i].deadNum;
                        that.cureNum += that.result[i].curedNum;
                        that.cumNum_inc += that.result[i].yesterday_inc_info.confirmed_inc+that.result[i].yesterday_inc_info.cured_inc+that.result[i].yesterday_inc_info.dead_inc;
                        that.nowNum_inc += that.result[i].yesterday_inc_info.confirmed_inc;
                        that.deadNum_inc += that.result[i].yesterday_inc_info.dead_inc;
                        that.cureNum_inc += that.result[i].yesterday_inc_info.cured_inc
                    }
                }
            });
        },
        search(){
            setTimeout(()=>{
                if(!this.input){
                    this.cumNum = 0;
                    this.nowNum = 0;
                    this.deadNum = 0;
                    this.cureNum = 0;
                    this.cumNum_inc = 0;
                    this.deadNum_inc = 0;
                    this.cureNum_inc = 0;
                    this.nowNum_inc = 0;
                    for(var i=0;i<this.result.length;i++){
                        this.cumNum += this.result[i].confirmedNum;
                        this.nowNum += this.result[i].currentConfirmedNum;
                        if(!this.result[i].deadNum){
                            this.result[i].deadNum = 0
                        }
                        if(!this.result[i].curedNum){
                            this.result[i].curedNum = 0
                        }
                        this.deadNum += this.result[i].deadNum;
                        this.cureNum += this.result[i].curedNum;
                        this.cumNum_inc += this.result[i].yesterday_inc_info.confirmed_inc+this.result[i].yesterday_inc_info.cured_inc+this.result[i].yesterday_inc_info.dead_inc;
                        this.nowNum_inc += this.result[i].yesterday_inc_info.confirmed_inc;
                        this.deadNum_inc += this.result[i].yesterday_inc_info.dead_inc;
                        this.cureNum_inc += this.result[i].yesterday_inc_info.cured_inc
                    }
                }else{
                    var flag = 0;
                    for(var i=0;i<this.result.length;i++){
                        if(this.input == this.result[i].areaName){
                            this.cumNum = this.result[i].confirmedNum;
                            this.nowNum = this.result[i].currentConfirmedNum;
                            this.deadNum = this.result[i].deadNum;
                            this.cureNum = this.result[i].curedNum;
                            this.cumNum_inc = this.result[i].yesterday_inc_info.confirmed_inc+this.result[i].yesterday_inc_info.cured_inc+this.result[i].yesterday_inc_info.dead_inc;
                            this.nowNum_inc = this.result[i].yesterday_inc_info.confirmed_inc;
                            this.deadNum_inc = this.result[i].yesterday_inc_info.dead_inc;
                            this.cureNum_inc = this.result[i].yesterday_inc_info.cured_inc
                            flag = 1;
                            this.input = ''
                        }
                    }
                    if(flag == 0){
                        this.$message.error('输入的国家有误');
                    }else{
                        this.$message({
                            message: '查询成功',
                            type: 'success'
                        });
                    }
                }
                console.log(this.result);
            },200)
        },
        created_data(){
          setTimeout(()=>{
            for(var i=0;i<this.result.length;i++){
            var obj = {}
            var name = this.result[i].areaName;
            var value = this.result[i].currentConfirmedNum;
            obj = {
              name,
              value
            }
            this.data_world.push(obj)
          }

          },300)
        },
         getWorld () {
           setTimeout(()=>{let namemap = this.map.namemap
            // let dataArr = res.data.dataArr
            let dataArr = this.data_world;
           this.drawChart(namemap, dataArr)},300)
            
        },
        drawChart (name, data) {
      // 基于准备好的dom，初始化echarts实例
      let chart = echarts.init(document.getElementById('chart'))
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        chart.resize()
      })
      // 绘制图表
      chart.setOption({
        // 图表主标题
        title: {
          text: '世界地图', // 主标题文本，支持使用 \n 换行
          top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
          left: 'center', // 值: 'left', 'center', 'right' 同上
          textStyle: { // 文本样式
            fontSize: 24,
            fontWeight: 600,
            color: '#fff'
          }
        },
        // 提示框组件
        tooltip: {
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
          // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
          // 使用函数模板  传入的数据值 -> value: number | Array
          formatter: function (val) {
            try{
              return val.data.name + '\n'+"确诊人数：" + val.data.value
            }catch(TypeError){
            }
            
          }
        },
        // 视觉映射组件
        visualMap: {
          type: 'continuous', // continuous 类型为连续型  piecewise 类型为分段型
          show: true, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
          // 指定 visualMapContinuous 组件的允许的最小/大值。'min'/'max' 必须用户指定。
          // [visualMap.min, visualMax.max] 形成了视觉映射的『定义域』
          min: 0,
          max: 100000,
          // 文本样式
          textStyle: {
            fontSize: 14,
            color: '#fff'
          },
          realtime: false, // 拖拽时，是否实时更新
          calculable: true, // 是否显示拖拽用的手柄
          // 定义 在选中范围中 的视觉元素
          inRange: {
            color: ['#FFF1D0', '#FFD0A3', '#FF8A74', '#F04B4A', '#C51623', "#841710"] // 图元的颜色
          }
        },
        series: [
          {
            type: 'map', // 类型
            // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
            name: '世界地图',
            mapType: 'world', // 地图类型
            // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
            roam: false,
            // 图形上的文本标签
            label: {
              show: false // 是否显示对应地名
            },
            // 地图区域的多边形 图形样式
            itemStyle: {
              areaColor: '#7B68EE', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
              borderWidth: 0.5, // 描边线宽 为 0 时无描边
              borderColor: '#000', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
              borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
            },
            // 高亮状态下的多边形和标签样式
            emphasis: {
              label: {
                show: true, // 是否显示标签
                color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
              },
              itemStyle: {
                areaColor: '#FF6347' // 地图区域的颜色
              }
            },
            // 自定义地区的名称映射
            nameMap: name,
            // 地图系列中的数据内容数组 数组项可以为单个数值
            data: data
          }
        ]
      })
      // // 定时显示提示框和高亮效果
      // let index = -1
      // setInterval(function () {
      //   // 隐藏提示框
      //   chart.dispatchAction({
      //     type: 'hideTip',
      //     seriesIndex: 0,
      //     dataIndex: index
      //   })
      //   // 显示提示框
      //   chart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: index + 1
      //   })
      //   // 取消高亮指定的数据图形
      //   chart.dispatchAction({
      //     type: 'downplay',
      //     seriesIndex: 0,
      //     dataIndex: index
      //   })
      //   // 高亮指定的数据图形
      //   chart.dispatchAction({
      //     type: 'highlight',
      //     seriesIndex: 0,
      //     dataIndex: index + 1
      //   })
      //   index++
      //   if (index > data.length - 1) {
      //     index = -1
      //   }
      // }, 2000)
    }   
    },
    mounted () {
        this.getWorld()
    },
    created () {
        this.created_data();
        this.currentWorld();
        
    },

}
</script>
<style scoped>
.wrapper {
    margin: 0 auto;
    height: 300px;
    width: 50%
  }
  .wrapper .chart {
    width: 80%;
    margin:0 auto;
    height: 300px;

    /* background: url(../../public/static/bg.png) no-repeat; 背景图设置*/ 
    background-size: 100% 100%;
  }
.afterday{
    height: 20px;
    width: 120px;
    height: 20px;
    margin: 5px auto;
    font-weight: 800px;
    font-size: 14px;
    text-align: center;
}
.title{
    height: 20px;
    width: 80px;
    height: 20px;
    margin: 5px auto;
    font-weight: 800px;
    font-size: 18px;
}
  .el-row {
    margin-bottom: 20px;
    color: black;

  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 55px;
    color: white;
    line-height: 55px;
    font-size:28px ;
    text-align: center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>